﻿<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="()=>{this.visible=false}"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">

        <a-collapse accordion default-active-key="1" :bordered="false" v-model="activeKey">
      <a-collapse-panel :style="customStyle" key="1" header="服务商基本信息">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="名称" prop="ServiceName ">
          <a-input v-model="entity.ServiceName " autocomplete="off" />
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="统一社会信用代码" prop="UnifiedSocialCreditCode"> 
          <a-input v-model="entity.UnifiedSocialCreditCode" autocomplete="off" />
        </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="法人姓名" prop="LegalPersonName">
          <a-input v-model="entity.LegalPersonName" autocomplete="off" />
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
          <a-form-model-item label="法人身份证号码" prop="identNo">
          <a-input v-model="entity.identNo" autocomplete="off" />
        </a-form-model-item>
        </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="联系电话" prop="AgentPhone">
          <a-input v-model="entity.AgentPhone" autocomplete="off" />
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="银行账号" prop="AcctNo">
          <a-input v-model="entity.AcctNo" autocomplete="off" />
        </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="开户行" prop="BankName">
          <a-input v-model="entity.BankName" autocomplete="off" />
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="企业住址" prop="areaName">
          <a-input v-model="entity.areaName" autocomplete="off" />
        </a-form-model-item>
          </a-col>
        </a-row>
       </a-collapse-panel>
       <a-collapse-panel :style="customStyle" key="2" header="上传资料">
         <a-form-model-item label="电子章信息" prop="ElectronicChapter">
           <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload"
                    :before-upload="beforeUpload"
                  >
                    <img style="width:102px;height:102px" v-if="entity.ElectronicChapter" :src="entity.ElectronicChapter" alt="电子章" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">电子章</div>
                    </div>
                  </a-upload>
        </a-form-model-item>
       </a-collapse-panel>
       </a-collapse>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    parentObj: Object
  },
  data() {
    return {
      customStyle:
        'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      activeKey: ['1'],//折叠面板
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {
        ServiceName:[{ required: true, message: '请输入名称' }],
        UnifiedSocialCreditCode:[{ required: true, message: '请输入社会统一信用代码' }],
        LegalPersonName:[{ required: true, message: '请输入法人姓名' }],
        identNo:[{ required: true, message: '请输入法人身份证' }],
        AgentPhone:[{ required: true, message: '请输入联系电话' }],
        AcctNo:[{ required: true, message: '请输入银行账号' }],
        BankName:[{ required: true, message: '请输入开户行' }],
        areaName:[{ required: true, message: '请输入企业地址' }],
      },
      title: ''
    }
  },
  methods: {
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()

      if (id) {
        this.loading = true
        this.$http.post('/Base_leasesystem_service/leasesystem_service/GetTheData', { id: id }).then(resJson => {
          this.loading = false
          this.entity = resJson.Data
          console.log(this.entity)
        })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Base_leasesystem_service/leasesystem_service/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpeg、png格式!');
      }
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error('大小必须小于2M!');
      }
      return isJpgOrPng && isLt2M;
    },
    selfUpload({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
     const formData = new FormData()
      let that = this
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.ElectronicChapter = res.url
        this.loading = false
      })
	  },
    
  }
}
</script>
